<template>
  <div class="box">
    <div class="searchheader van-hairline--bottom">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        autofocus
        shape="round"
      >
        <template #action>
          <van-button
            class="searchbtn"
            type="primary"
            round
            size="mini"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            @click="onSearch1"
            >搜索</van-button
          >
        </template>
        <template #left>
          <van-icon name="arrow-left" size="26" @click="$router.back()" />
        </template>
      </van-search>
    </div>
    <div class="main">
      <div class="hotsearch">
        <div class="hottitle">
          <h4>热门搜索</h4>
          <span v-if="flag" @click="flag=!flag">隐藏</span>
          <span v-else @click="flag=!flag">显示</span>
        </div>
        <div class="hotlist" v-if="flag">
        <span class="keyword" v-for="(item,index) in hotList" :key="index">{{item.keyword}}</span>
        </div>
        <div class="nothinglist" v-else>
        <p class="nothing">已隐藏搜索发现</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {gethotword} from "../api/search"
import Vue from "vue";
import { Search } from "vant";

Vue.use(Search);
export default {
  data() {
    return {
      value: "",
      hotList:[],
      flag:true,
    };
  },
  methods: {
    onSearch(val) {
      console.log(val);
      this.$router.push("/searchlist/"+val)
    },
    onSearch1(){
      console.log(this.value);
      this.$router.push("/searchlist/"+this.value)
    }
  },
  created () {
    gethotword().then(res=>{
        console.log(res);
        this.hotList = res.data.data
    })
  }
};
</script>

<style scoped>
.searchheader {
  height: 0.44rem;
  line-height: 0.44rem;
}
::v-deep .van-search {
  padding: 0.05rem 0.12rem;
}
.searchbtn {
  width: 0.5rem;
  height: 0.24rem;
}
::v-deep .van-search__action {
  display: flex;
}
.hotsearch{
    background: #fff;
    border-radius: 0 0 .1rem .1rem;
}
.hottitle{
    display: flex;
    justify-content: space-between;
    padding: .14rem;
}
.hottitle span{
    font-size: .14rem;
    color: #888;
}
.hotlist{
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
}
.hotlist span{
    font-size: .14rem;
    color: #888;
}
.keyword{
  margin: .1rem;
}
.nothing{
    display: flex;
    font-size: .14rem;
    color: #888;
    justify-content: center;
    line-height: 1rem;
}
</style>